<template>
  <div class="socketio">
    <div class="sidebar">
      <card :user="user" :search.sync="search"></card>
      <list
        :user-list="userList"
        :session="session"
        :session-index.sync="sessionIndex"
        :search="search"
      ></list>
    </div>
    <div class="main">
      <message :session="session" :user="user" :user-list="userList"></message>
      <texts :session="session"></texts>
    </div>
  </div>
</template>

<script>
// import store from "../../components/socket/store";
import card from "../../components/socket/card";
import list from "../../components/socket/list";
import texts from "../../components/socket/text";
import message from "../../components/socket/message";

export default {
  name: "socketio",
  data() {
    return {
      // 登录用户
      user: {
        id: 1,
        name: "Coffce",
        img: require("@/common/assets/1.jpg")
      },
      // 用户列表
      userList: [
        {
          id: 2,
          name: "站长素材",
          img: require("@/common/assets/2.png")
        },
        {
          id: 3,
          name: "webpack",
          img: require("@/common/assets/3.jpg")
        }
      ],
      // 会话列表
      sessionList: [
        {
          userId: 2,
          messages: [
            {
              text:
                "Hello，这是一个基于Vue + Webpack构建的简单chat示例，聊天记录保存在localStorge。简单演示了Vue的基础特性和webpack配置。",
              date: "2020-08-10"
            },
            {
              text: "项目地址: https://sc.chinaz.com/jiaoben/",
              date: "2020-08-10"
            }
          ]
        },
        {
          userId: 2,
          messages: []
        }
      ],
      // 搜索key
      search: "",
      // 选中的会话Index
      sessionIndex: 0,
      con: ""
    };
  },
  components: {
    card,
    list,
    texts,
    message
  },
  computed: {
    session() {
      return this.sessionList[this.sessionIndex];
    }
  },
  // watch: {
  //   // 每当sessionList改变时，保存到localStorage中
  //   sessionList: {
  //     deep: true,
  //     handler() {
  //       store.save({
  //         user: this.user,
  //         userList: this.userList,
  //         sessionList: this.sessionList
  //       });
  //     }
  //   }
  // },

  mounted() {
    this.$socket.emit("userName", "123"); //触发socket连接
  },
  sockets: {
    // socket自带事件
    connect() {
      // 监听socket连接
      console.log("socket 已经连接了！");
      this.con = "socket 已经连接了！";
    },
    onConnect() {
      this.$socket.emit("userName", "123"); //监听connect事件
    },
    receiveMsg(value) {
      console.log(value);
    }
  },
  created() { },
  methods: {}
};
</script>

<style scope>
.socketio {
  overflow: hidden;
  border-radius: 3px;
  color: #4d4d4d;
  font: 14px/1.4em "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial,
    sans-serif;
  background: #f5f5f5 url("../../common/assets/bg.jpg") no-repeat center;
  background-size: cover;
  margin: 20px auto;
  width: 800px;
  height: 600px;
}
.sidebar {
  float: left;
  height: 100%;
  width: 200px;
  color: #f4f4f4;
  background-color: #2e3238;
}
.main {
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #eee;
}
.m-text {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
.m-message {
  height: calc(100% - 160px);
}
</style>
